<template>
    <div>
        <h1>显示页面</h1>
        房间号: <input type="text" v-model="data.name"> &nbsp;&nbsp;
        房间类型: <select v-model="data.tname">
            <option value="">请选择</option>
            <option :value="a.HouseTypeName" v-for="a in hhh">{{ a.HouseTypeName }}</option> &nbsp;&nbsp;
        </select>&nbsp;&nbsp;&nbsp;&nbsp;
        <button value="查询" @click="so" class="btn btn-info">查询</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button value="批量删除" @click="del" class="btn btn-danger">批量删除</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button value="批量启用" @click="upt(1)" class="btn btn-primary">批量启用</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button value="批量禁用" @click="upt(0)" class="btn btn-primary">批量禁用</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button value="导出" @click="ex" class="btn btn-success">导出</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="file" @change="selfile">
        <button value="导入" @click="inpot" class="btn btn-success">导人</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <table class="table table-bordered" border="1px">
            <tbody>
                <tr class="bg-primary">
                    <td><input type="checkbox" v-model="c" @click="checkall"></td>
                    <td>房间号</td>
                    <td>房型类型名称</td>
                    <td>房型图片</td>
                    <td>房型价格</td>
                    <td>房型面积</td>
                    <td>是否有窗</td>
                    <td>简介</td>
                    <td>是否加床</td>
                    <td>是否含有早餐</td>
                    <td>最多入住人数</td>
                    <td>房型状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in info.list">
                    <td>
                        <input type="checkbox" :value="a.Id" v-model="cc" @change="checkno">
                    </td>
                    <td>{{ a.HouseNumber }}</td>
                    <td>{{ a.HouseTypeName }}</td>
                    <td>
                        <img :src="a.Photo" width="60px" height="50px">
                        <a :href="a.Photo">查看</a>
                    </td>
                    <td>{{ a.Money }}</td>
                    <td>{{ a.Area }}</td>
                    <td>{{ a.IsWin == 1 ? "有窗" : "无窗" }}</td>
                    <td>{{ a.Desc }}</td>
                    <td>{{ a.IsBed == 1 ? "可以加床" : "不可以加床" }}</td>
                    <td>{{ a.Breakfast == 1 ? "包含早餐" : "不包含" }}</td>
                    <td>{{ a.PeopleCount }}</td>
                    <td>{{ a.State == 1 ? "启用" : "禁用" }}</td>
                    <td>
                        <button value="启用" @click="upd(a.Id, 1)" class="btn btn-primary" v-if="a.State == 0">启用</button>
                        <button value="禁用" @click="upd(a.Id, 0)" class="btn btn-primary" v-if="a.State == 1">禁用</button>
                        <button value="删除" @click="dell(a.Id)" class="btn btn-danger">删除</button>
                        <button value="修改" @click="update(a.Id)" class="btn btn-info">修改</button>
                        <button value="详情" @click="find(a.Id)" class="btn btn-primary">详情</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span style="color: blue;"> 共 {{ info.Hnum }} 数 ， 每 页 {{ data.pagesize }} 条 ， 共 {{ data.pagindex }} / {{
                info.Ynum }} 页 </span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button value="首页" @click="getlist(1)" class="btn btn-primary">首页</button>&nbsp;
            <button value="上一页" @click="getlist(data.pagindex - 1)" class="btn btn-primary">上一页</button> &nbsp;
            <span v-for="a in info.Ynum" style="color: chartreuse;" @click="getlist(a)"> {{ a }}&nbsp; </span>&nbsp;
            <button value="下一页" @click="getlist(data.pagindex + 1)" class="btn btn-primary">下一页</button>&nbsp;
            <button value="尾页" @click="getlist(info.Ynum)" class="btn btn-primary">尾页</button>&nbsp;
            <input type="number" v-model="data.pagindex" @change="getlist(data.pagindex)">
            <button
                @click="getlist(data.pagindex)">跳转</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <select v-model="data.pagesize" @change="so">
                <option :value="a" v-for="a in ss">每页 {{ a }} 条</option>
            </select>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router'
const router = useRouter();
let c: any = ref(false)
let cc: any = ref([])
let hhh: any = ref([])
onMounted(() => {
    bind();
    show();
})

const bind = () => {
    axios({
        url: 'https://localhost:7056/api/House/BindHType',
        method: 'get',
    })
        .then(res => {
            console.log(res.data);
            Object.assign(hhh.value, res.data);
        })
}

let data: any = ref({
    name: '',
    tname: '',
    pagindex: 1,
    pagesize: 3,
})

let info: any = reactive({
    Hnum: 0,
    Ynum: 0,
    list: []
})
let ss: any = ref([3, 5, 10, 50, 100])
const so = () => {
    data.value.pagindex = 1;
    show();
}
const getlist = (num: any) => {
    if (num < 1) {
        data.value.pagindex = 1;
        show();
        alert('不能小于1');
        return;
    }
    if (num > info.Ynum) {
        data.value.pagindex = info.Ynum;
        show();
        alert('不能大于总页码!');
        return;
    }
    data.value.pagindex = num;
    show();
}

const show = () => {
    axios({
        url: 'https://localhost:7056/api/House/ShowHouse',
        method: 'get',
        params: data.value
    })
        .then((res) => {
            console.log(res.data);
            Object.assign(info, res.data);
        })
}
const checkall = () => {
    c.value = !c.value;
    if (c.value == true) {
        cc.value = info.list.map((a: any) => {
            return a.Id
        })
        console.log(cc.value);
        return;
    }
    else {
        cc.value = [];
        console.log(cc.value);
        return;
    }
}

const checkno = () => {
    if (info.list.length == cc.value.length) {
        c.value = true;
        return;
    }
    else {
        c.value = false;
        return;
    }
}

const del = () => {
    if (cc.value == "") {
        alert('必须选择一个!');
        return;
    }
    axios({
        url: 'https://localhost:7056/api/House/Delall',
        method: 'delete',
        params: {
            id: cc.value.toString()
        }
    })
        .then((res) => {
            if (res.data > 0) {
                alert('删除成功!');
                so();
                return;
            }
            else {
                alert('删除失败!');
                return;
            }
        })
}

const dell = (id: any) => {
    if (confirm('确认删除吗?'))
        axios({
            url: 'https://localhost:7056/api/House/Delall',



            method: 'delete',
            params: {
                id: id
            }
        })
            .then((res) => {
                if (res.data > 0) {
                    alert('删除成功!');
                    so();
                    return;
                }
                else {
                    alert('删除失败!');
                    return;
                }
            })

}

const upt = (state: any) => {
    if (cc.value == "") {
        alert('必须选择一个!');
        return;
    }
    axios({
        url: 'https://localhost:7056/api/House/Updateall',
        method: 'put',
        params: {
            id: cc.value.toString(),
            state: state
        }
    })
        .then((res) => {
            if (res.data > 0) {
                alert('修改成功!');
                c.value = false;
                cc.value = [];
                so();
                return;
            }
            else {
                alert('修改失败!');
                c.value = false;
                cc.value = [];
                return;
            }
        })
}

const upd = (id: any, state: any) => {

    axios({
        url: 'https://localhost:7056/api/House/Updateall',
        method: 'put',
        params: {
            id: id,
            state: state
        }
    })
        .then((res) => {
            if (res.data > 0) {
                alert('修改成功!');
                c.value = false;
                cc.value = [];
                so();
                return;
            }
            else {
                alert('修改失败!');
                c.value = false;
                cc.value = [];
                return;
            }
        })
}

const update = (id: any) => {
    router.push({
        path: '/housefind',
        query: {
            id: id
        }
    });
}
const find = (id: any) => {
    router.push({
        path: '/houseFinds',
        query: {
            id: id
        }
    });
}
//导出
const ex = () => {
    location.href = `https://localhost:7056/Exlsx?name=${data.value.name}&tname=${data.value.tname}&pagindex=${data.value.pagindex}&pagesize=${data.value.pagesize}`;
}
let ga: any = ref();
//导入
const selfile = (e: any) => {
    console.log(e);
    ga.value = e.target.files[0];
}

const inpot = () => {
    console.log(ga.value);
    if (ga.value == undefined) {
        alert('未选择文件!');
        return;
    }
    let f = new FormData();
    f.append('file', ga.value);
    axios({
        url: 'https://localhost:7056/api/House/daoru',
        method: 'post',
        data: f
    })
        .then((res) => {
            if (res.data > 0) {
                alert('导入成功!');
                so();
                return;
            }
            else {
                alert('导入失败!');
                return;
            }
        })
}
</script>

<style scoped></style>